<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>
<app-load *ngIf="isLoading"></app-load>
<div class="header">
  <div class="left flex" [routerLink]="['/main/statistics']" id="btn-back">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>
  <div class="center">会员卡统计</div>
</div>

<div class="main">
  <div class="search flex" style="background-color: #fff;padding-left: 1em;border-bottom: 1px solid #eee;line-height: 3em;height: 3em;">
    <div class="input" style="width: 20%;flex: none;line-height: 3em;height: 3em;">
      姓名：
    </div>
    <div class="input">
      <input class="search-input" style="border: none;" type="text" [(ngModel)]="params.name" placeholder="请输入姓名">
    </div>
  </div>
  <div class="search flex" style="background-color: #fff;padding-left: 1em;border-bottom: 1px solid #eee;line-height: 3em;height: 3em;">
    <div class="input" style="width: 20%;flex: none;line-height: 3em;height: 3em;">
      卡号：
    </div>
    <div class="input">
      <input class="search-input c-select" style="border: none;" type="text" [(ngModel)]="params.cardNum" placeholder="请输入会员卡号">
    </div>
  </div>
  <div class="search flex" style="background-color: #fff;padding-left: 1em;border-bottom: 1px solid #eee;line-height: 3em;height: 3em;">
    <div class="input" style="width: 20%;flex: none;">
      手机号：
    </div>
    <div class="input">
      <input class="search-input c-select" style="border: none;line-height:3em;height: 3em;" type="text" [(ngModel)]="params.mobile" placeholder="请输入手机号">
    </div>
  </div>
  <div class="search flex" style="background-color: #fff;padding: .5em;">
    <div class="input" style="width: 20%;flex: none;line-height: 2.5em;height: 2.5em;">
      &nbsp;
    </div>
    <div class="input">
      <span class="clear-data" (click)="clearData()">清除</span><span class="search-btn" (click)="getData(true)" style="margin-left: 2em;">搜索</span>
    </div>
  </div>
  <div *ngIf="list.length"
       style="font-weight: 600;font-size: 1.2em;padding-left: 1em;background: #fff;border-top: 2px solid #3c8dbc;height:3em;line-height:3em;text-align: left;color: #666;">
    会员卡统计数据
  </div>
  <div class="record-box">
    <div class="record-list">
      <div class="record-item flex" style="color: #00a65a;font-weight: 700">
        <div class="record-item-name">会员卡总数</div>
        <div class="record-item-text" style="font-size: 1.1em;">{{result['totalNum']}}</div>
      </div>
      <div class="record-item flex" style="color: #f39c12;font-weight: 700">
        <div class="record-item-name">会员卡剩余总金额</div>
        <div class="record-item-text"style="font-size: 1.1em;">￥{{result['totalBalance'] | price}}</div>
      </div>
      <div class="record-item flex" style="color: #dd4b39;font-weight: 700">
        <div class="record-item-name">会员卡剩余总积分</div>
        <div class="record-item-text"style="font-size: 1.1em;">{{result['totalIntegral']}}</div>
      </div>
    </div>
  </div>
  <div *ngIf="list.length"
       style="font-weight: 600;font-size: 1.2em;padding-left: 1em;background: #fff;border-top: 2px solid #3c8dbc;height:3em;line-height:3em;text-align: left;color: #666;">
    会员卡列表
  </div>
  <div class="record-box">
    <div class="record-list" *ngFor="let v of list">
      <div class="record-item flex">
        <div class="record-item-name">卡号</div>
        <div class="record-item-text">{{v.card_num}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">卡分类</div>
        <div class="record-item-text">{{v.className}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">姓名</div>
        <div class="record-item-text">{{v.user_name}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">持卡人手机号</div>
        <div class="record-item-text">{{v.mobile}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">性别</div>
        <div class="record-item-text">{{v.sex}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">是否删除</div>
        <div class="record-item-text"><span *ngIf="v.is_delete == '0'">否</span><span *ngIf="v.is_delete == '1'" style="background: #d9534f;color:#fff;adding: .1em .2em;border-radius: 2px;">是</span></div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">余额</div>
        <div class="record-item-text">￥{{v.balance | price}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">积分</div>
        <div class="record-item-text">{{v.integral}}</div>
      </div>
    </div>
  </div>

  <div class="load-data" *ngIf="loading">
    <p class="load-data-icon">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </p>
    <p class="load-data-text">
      数据加载中
    </p>
  </div>
  <div class="load-more" *ngIf="totalPage > params.start" (click)="loadMore()">
    <i class="fa fa-spinner fa-spin fa-fw"></i> <span>点击加载更多...</span>
  </div>
</div>
<div class="no-data" *ngIf="!list.length && isFlag">
  <p class="load-data-description">
    <i class="fa fa-info-circle"></i> <span>暂无统计数据</span>
  </p>
</div>
